<template>
  <div
    class="plan-edit-box"
    element-loading-text="数据加载中"
    element-loading-spinner="el-icon-loading"
    v-loading="pageLoading"
  >
    <div class="plan-page-header">
      <div class="header-title"></div>
      <div class="header-btns">
        <RPButton optType="reset" style="margin-right: 10px" @click="hideFun" text="返回" />
      </div>
    </div>
    <div class="plan-page-content">
      <div class="header-title">基础信息</div>
      <div class="ivu-form-no-margin-bottom">
        <Row :gutter="20" class="code-row-bg">
          <Col span="8" class="info-col">
            <span>规则组名称：</span>
            <span>{{info.ruleGroupName}}</span>
          </Col>
          <Col span="8" class="info-col">
            <span>报表类型：</span>
            <span>{{info.reportType}}</span>
          </Col>
          <Col span="8" class="info-col">
            <span>报表名称：</span>
            <span>{{info.reportName}}</span>
          </Col>
        <!-- </Row> -->
        <!-- <Row :gutter="20" class="code-row-bg"> -->
          <Col span="8" class="info-col">
            <span>触发条件：</span>
            <span>{{ triggerConditionMap[info.triggerCondition] || ''}}</span>
          </Col>
          <Col span="8" class="info-col">
            <span>触发时间：</span>
            <span>{{info.triggerTime}}</span>
          </Col>
          <Col v-if="info.triggerCondition == triggerConditionStart" span="8" class="info-col">
            <span>计划填报时间：</span>
            <span>{{info.scheduledTime}}</span>
          </Col>
          <Col v-if="info.triggerCondition == triggerConditionUrging" span="8" class="info-col">
            <span>计划截止时间：</span>
            <span>{{info.scheduledTime}}</span>
          </Col>
          <Col v-if="info.triggerCondition != triggerConditionNotDelay && info.reportName == '数字化转型专项实施方案任务表'" span="8" class="info-col">
            <span>季度：</span>
            <span>{{info.reportTime}}</span>
          </Col>
        <!-- </Row> -->
        <!-- <Row :gutter="20" class="code-row-bg"> -->
          <Col span="8" class="info-col">
            <span>接收方式：</span>
            <span>{{ remindWayMap[info.remindWay] || '' }}</span>
          </Col>
          <Col span="8" class="info-col">
            <span>接收人：</span>
            <span>{{info.receiver}}</span>
          </Col>
          <Col span="8" class="info-col">
            <span>抄送人：</span>
            <span>{{info.ccs}}</span>
          </Col>
        <!-- </Row> -->
        <!-- <Row :gutter="20" class="code-row-bg"> -->
          <Col span="8" class="info-col">
            <span>发送时间：</span>
            <span>{{info.createTime}}</span>
          </Col>
          <Col span="8" class="info-col">
            <span>发送状态：</span>
            <span>{{ sendStateMap[info.state] || '' }}</span>
          </Col>
        </Row>
      </div>
    </div>
    <div class="line"></div>
    <div class="plan-page-content">
      <Tabs class="tabs-app">
        <TabPane label="提醒内容" name="inner" class="tab-pane">
          <div class="ivu-form-no-margin-bottom">
            <div class="email-container">
              <div class="email-item">
                <div class="title">邮件主题：</div>
                <div>{{info.mailTitle}}</div>
              </div>
              <div class="email-item">
                <div class="title">邮件内容：</div>
                <div>{{info.content}}</div>
              </div>
            </div>
          </div>
        </TabPane>
      </Tabs>
      
    </div>
  </div>
</template>
<script>
import readApi from '../../../api/read.js'
import { 
  TRIGGER_CONDITION_MAP,
  TRIGGER_CONDITION_START,
  TRIGGER_CONDITION_URGING,
  TRIGGER_CONDITION_NOT_SUBMIT,
  TRIGGER_CONDITION_NOT_DELAY,
  RECEIVE_WAY_MAP,
  SEND_STATE_MAP,
} from './const.js'

export default {
  components: {},
  name: 'createConfig',
  props: {
    title: {
      type: String,
      default() {
        return ''
      }
    },
    data: {
      type: Object,
      default: () => {}
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      triggerConditionMap: TRIGGER_CONDITION_MAP,
      triggerConditionStart: TRIGGER_CONDITION_START,
      triggerConditionUrging: TRIGGER_CONDITION_URGING,
      triggerConditionNotSubmit: TRIGGER_CONDITION_NOT_SUBMIT,
      triggerConditionNotDelay: TRIGGER_CONDITION_NOT_DELAY,
      remindWayMap: RECEIVE_WAY_MAP,
      sendStateMap: SEND_STATE_MAP,
      pageLoading: false,
      info: {}
    }
  },
  computed: {},
  created() {},
  watch: {},
  beforeMount: function () {},
  mounted() {
    if (this.data && this.data.id) {
      this.info = this.data
    } else {
      readApi.getDetail({id: this.id}).then(res => {
        this.info = res.data.data
      })
    }
  },
  beforeDestroy: function () {},
  destroyed: function () {},
  methods: {
    hideFun() {
      this.$parent.hide()
    },
    init() {},
    save() {}
  },
  directives: {}
}
</script>

<style lang="less" scoped>
.line {
  width: 100%;
  height: 20px;
  background: #f4f6fd;
  margin-bottom: 20px;
}
.info-col {
  margin-bottom: 20px;
  border: none;
}
/deep/.code-row-bg{
    margin-bottom: 20px;
}
/deep/.ivu-btn-warning {
  padding: 4px 23px;
  background-color: #ff6f4b;
  border-color: #ff6f4b;
  border-radius: 0;
}
.plan-edit-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .plan-page-header {
    display: flex;
    justify-content: space-between;
    height: 60px;
    align-items: center;
    padding: 0 20px;
    .header-title {
      font-size: 16px;
      font-weight: bold;
    }
  }
  .plan-page-content {
    flex: 1;
    padding: 0 30px;
  }
}
.content {
  display: block;
  width: 60%;
  border: 1px solid #000;
  margin: 0 auto;
  min-height: 200px;
  padding: 20px
}
.email-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 60%;
  border: 1px solid #000;
  margin: 0 auto;
  min-height: 200px;
  padding: 20px;
  .email-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding-bottom: 15px;
    .title {
      flex-shrink: 0;
      width: 70px;
    }
  }
}
.header-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
/deep/.ivu-tabs-nav .ivu-tabs-tab-active {
  color: #000;
  font-size: 18px;
  font-weight: bold;
}
</style>
